<template>
  <div class="container">
    <el-card class="box-card">
      <el-button class="addbtn" icon="el-icon-edit" type="success" @click="addShiti">新增试题</el-button>
      <!-- 表单 -->
      <el-form
        :label-position="labelPosition"
        :model="dataForm"
        ref="dataForm"
        label-width="80px"
        style="margin-top:20px"
      >
        <!-- @clear="getList" -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="dataForm.subjectID"
                placeholder="请选择"
                @change="getdirectorySimple"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item,index) in getSubjectSimpleList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="dataForm.catalogID" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item,index) in directorySimple"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="dataForm.tags" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item,index) in tagsSimple"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input style="width:240px" v-model="dataForm.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="dataForm.questionType" placeholder="请选择">
                <el-option label="单选" value="单选"></el-option>
                <el-option label="多选" value="多选"></el-option>
                <el-option label="简答" value="简答"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="dataForm.difficulty" placeholder="请选择">
                <el-option label="简单" value="简单"></el-option>
                <el-option label="一般" value="一般"></el-option>
                <el-option label="困难" value="困难"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="dataForm.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item,index) in directions"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="dataForm.creatorID" placeholder="请选择">
                <el-option label="超级管理员" value="超级管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input style="width:215px" v-model="dataForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input style="width:215px" v-model="dataForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                v-model="dataForm.province"
                placeholder="请选择"
                @change="getCity"
                style="width:103px"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, index) in province"
                  :key="index"
                ></el-option>
              </el-select>
              <el-select
                v-model="dataForm.city"
                placeholder="请选择"
                style="width:103px;margin-left:5px"
              >
                <el-option :label="item" :value="item" v-for="(item, index) in city" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="margin-left:90px">
              <el-button size="mini" @click="resetForm('dataForm')">清除</el-button>
              <el-button size="mini" type="primary" id="sousuo" @click="sousuo">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 提示栏 -->
      <el-alert type="info" show-icon>
        <span slot="title">数据一共{{total}}条</span>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="250"></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.questionType=='1'">单选</span>
              <span v-else-if="scope.row.questionType=='2'">多选</span>
              <span v-else>简答</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
            <div>
              <p v-html="scope.row.question"></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="200">
          <template slot-scope="scope">
            <div>{{scope.row.addDate | format}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.difficulty=='1'">简单</span>
              <span v-else-if="scope.row.difficulty=='2'">一般</span>
              <span v-else>困难</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column prop label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              plain
              circle
              @click="handleView(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-edit"
              plain
              circle
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-check"
              plain
              circle
              @click="handleCheck(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="dataList.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="dataList.pagesize"
          layout=" prev, pager, next,sizes, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 试题预览弹框 -->
      <el-dialog :visible.sync="dialogVisible" width="50%" title="题目预览" :before-close="handleClose">
        <question-preview
          :dialogVisible="dialogVisible"
          :viewID="viewID"
          @visible="dialogVisible=false"
          v-if="dialogVisible"
        ></question-preview>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from "@/api/hmmm/questions.js";
import { simple, list as subjectlist } from "@/api/hmmm/subjects.js";
import { simple as directorySimple } from "@/api/hmmm/directorys.js";
import { simple as tagsSimple } from "@/api/hmmm/tags.js";
import { provinces, citys } from "@/api/hmmm/citys.js";
import questionPreview from "../components/questions-preview";
export default {
  data() {
    return {
      labelPosition: "right",
      dataForm: {
        subjectID: "",
        catalogID: "",
        tags: "",
        questionType: "",
        difficulty: "",
        direction: "",
        creatorID: "",
        province: [],
        city: [],
        keyword: "",
        remarks: "",
        shortName: "",
        page: 1,
        pagesize: 10,
      },
      tableData: [],
      dataList: { page: 1, pagesize: 10 },
      directorySimple: null || [], // 目录简单列表
      getSubjectSimpleList: [], // 学科简单列表
      tagsSimple: [], // 标签简单目录列表
      province: [],
      city: [],
      directions: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],
      total: null,
      choiceState: 1,
      dialogVisible: false,
      viewID: "", // 预览试题的id
    };
  },
  created() {
    this.getList();
    this.getSubjectSimple();
    this.getProvinces();
    // this.sousuo();
  },
  methods: {
    async sousuo() {
      const { data } = await list(this.dataForm);
      this.tableData = data.items;
      this.dataForm.page = +data.page;
      this.dataForm.pagesize = +data.pagesize;
      this.total = data.counts;
    },
    // 获取基础题库列表
    async getList() {
      try {
        const { data } = await list(this.dataList);
        // const { data } = await list(this.dataForm);
        console.log(data, 1);
        this.tableData = data.items;
        this.dataForm.page = +data.page;
        this.dataForm.pagesize = +data.pagesize;
        this.total = data.counts;
      } catch (error) {}
    },
    // 获取学科简单列表
    async getSubjectSimple() {
      const { data } = await simple();
      this.getSubjectSimpleList = data;
    },
    // 获取目录简单列表
    async getdirectorySimple() {
      const { data } = await directorySimple({
        subjectID: this.dataForm.subjectID,
      });
      this.directorySimple = data;
      // 获取标签简单目录列表
      const { data: res } = await tagsSimple({
        subjectID: this.dataForm.subjectID,
      });
      this.tagsSimple = res;
    },
    // 获取城市列表数据
    getProvinces() {
      const data = provinces();
      // console.log(data, "city");
      this.province = data;
    },
    getCity() {
      const data = citys(this.dataForm.province);
      // console.log(data, 99);
      this.city = data;
    },
    // 清空数据
    resetForm(dataForm) {
      this.dataForm = {};
    },
    // 试题预览
    handleView(index, row) {
      console.log(index, row, "123");
      this.dialogVisible = true;
      this.viewID = row.id;
    },
    // 关闭试题预览弹框
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 编辑试题
    handleEdit(index, row) {
      console.log(index, row.id, "id");
      this.$router.push({ path: "/questions/new", query: { id: row.id } });
    },
    // 删除试题
    async handleDelete(index, row) {
      const res = await this.$confirm(
        "此操作将永久删除该题目, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      if (res == "confirm") {
        const { data } = await remove({ id: row.id });
        // console.log(data, 2);
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getList();
      }
    },
    // 试题加入精选
    async handleCheck(index, row) {
      // console.log(index, row);
      const res = await this.$confirm(
        "此操作将该题目加入精选, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消加入精选",
        });
      });
      if (res == "confirm") {
        const { data } = await choiceAdd({
          id: row.id,
          choiceState: this.choiceState,
        });
        console.log(data, 3);
        this.$message({
          message: "加入精选成功",
          type: "success",
        });
      }
    },
    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.dataForm.pagesize = val;
      this.dataList.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.dataForm.page = val;
      this.dataList.page = val;
      this.getList();
    },
    // 新增试题
    addShiti() {
      this.$router.push("/questions/new");
    },
  },
  components: {
    questionPreview,
  },
};
</script>

<style scoped lang='scss'>
.container {
  padding: 20px 10px 0;
  .box-card {
    width: 100%;
    position: relative;
    padding: 20px;
    .addbtn {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .block {
      position: absolute;
      bottom: 5px;
      right: 20px;
    }
  }
}
.el-dialog__header {
  height: 55px;
}
</style>
